<template>
	<view class="view">
		<view class="card">
			<view class="form-item u-flex u-flex-xy-center">
				<view class="label">
					服务器地址
				</view>
				<view class="input u-flex-fill">
					<u--input placeholderClass="inp-holder" placeholder="请输入服务器地址" border="none" v-model="apiUrl" />
				</view>
			</view>
			<view class="form-item u-flex u-flex-xy-center">
				<view class="label">
					端口
				</view>
				<view class="input u-flex-fill">
					<u--input placeholderClass="inp-holder" placeholder="请输入端口" border="none" v-model="apiPort" />
				</view>
			</view>
		</view>
		<view class="sub">
			<u-button text="保存" type="primary" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiUrl: '',
				apiPort: ''
			}
		},
		onLoad() {
			let u = this.gApiUrl || null
			if(u) {
				u = u.split(':')
				this.apiUrl = u[0] + (u[1] || '')
				this.apiPort = u[2] || ''
			}
		},
		methods: {
			submit() {
				let u =  this.apiUrl + this.apiPort
				uni.$u.vuex('gApiUrl', u)
				uni.$u.http.setConfig(c => {
					c.baseURL = u
					return c
				})
				uni.$u.toast('保存成功')
			}
		}
	}
</script>

<style lang="scss">
.view {
	.card {
		padding: 0 40rpx;
		.form-item {
			height: 100rpx;
			&:nth-child(1) {
				border-bottom: 2rpx solid $u-light-color;
			}
			.label {
				width: 160rpx;
			}
		}
	}
	.sub {
		margin-top: 40rpx;
	}
}
</style>
